<template>
	<view class="container">
		<view class="top-wrapper">
			<view class="search-wrapper" @click="search">
				<image src="/static/search.png" class="icon"></image>
				<input class="uni-input" disabled="true" placeholder="请输入商品名" />
			</view>
		</view>
		<view class="place"></view>
		<view class="content">
			<swiper class="swiper" indicator-dots="true" indicator-color="rgba(249, 255, 254, .4)" indicator-active-color="#fff" autoplay="autoplay" interval="5000" duration="400">
				<swiper-item v-for="(banner, index) in bannerList" :key="index">
					<image class="img" :src="banner.image" @click="toLink(banner.link)" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="nav-list">
				<view class="nav-item" v-for="select in selectList" @click="listByType(select.id, select.name)" :key="select.id">
					<image class="icon" :src="select.image"></image>
					<view class="title">{{select.name}}</view>
				</view>
			</view>
			<view class="product-wrapper">
				<view class="title">热卖专区</view>
				<view class="product-list">
					<product v-for="product in productList" :product="product" :key="product.id"></product>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import product from './product.vue'
	import { banners } from '@/api/other.js'
	import { frontPage, selectByType } from '@/api/product.js'
	export default {
		components: {product},
		data() {
			return {
				bannerList: [],
				selectList: [],
				productList: [],
				pageLoadParam: {
					pageNum: 1,
					pageSize: 6,
					type: 2,
					isSelected: 1
				},
				isLoad: true
			}
		},
		onLoad() {
			this.getBanner()
			this.getSelectByType()
			this.getProductList()
		},
		onReachBottom() {
			if (this.isLoad) {
				++this.pageLoadParam.pageNum
				this.getProductList()
			}
		},
		methods: {
			getBanner() {
				const data = {
					type: 3
				}
				banners(data).then(respanse => {
					this.bannerList = respanse.result
				})
			},
			
			toLink(url) {
				if(url){
					uni.navigateTo({
				    url:`/pages/webView/index?url=${url}`
				})
				}
				
			},
			
			getSelectByType() {
				const data = {
					type: 2
				}
				selectByType(data).then(respanse => {
					this.selectList = respanse.result
				})
			},
			
			getProductList() {
				
				frontPage(this.pageLoadParam).then(respanse => {
					if (respanse.result.rows) {
						const len = respanse.result.rows.length
						if(len > 0) {
							this.isLoad = true
							this.productList = this.productList.concat(respanse.result.rows)
						} else {
							this.isLoad = false
						}
					} else {
						this.isLoad = false
					}
				})
			},
			
			// 根据分类查列表
			listByType(catId, name) {
				uni.navigateTo({
				    url: `/pages/special-price-mall/list?catId=${catId}&title=${name}`
				})
			},
			
			search() {
				uni.navigateTo({
				    url: '/pages/special-price-mall/list'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-wrapper{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 2;
		padding: 21rpx 28rpx;
		background-color: #F5F5F5;
		.search-wrapper{
			position: relative;
			height: 63rpx;
			border-radius: 32rpx;
			.icon{
				position: absolute;
				left: 33rpx;
				top: 20rpx;
				width: 28rpx;
				height: 23rpx;
			}
			.uni-input{
				display: block;
				padding-left: 70rpx;
				width: 100%;
				height: 63rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				color: #333;
			}
			background-color: #fff;
		}
	}
	.place{
		height: 105rpx;
		visibility: hidden;
	}
	.swiper{
		margin: 0 29rpx;
		height: 300rpx;
		.img{
			width: 100%;
			height: 300rpx;
			border-radius: 16rpx;
		}
	}
	.nav-list{
		display: flex;
		flex-wrap: wrap;
		padding-top: 19rpx;
		.nav-item{
			padding: 17rpx 0 12rpx;
			width: 25%;
			.icon{
				display: block;
				margin: 0 auto;
				width: 88rpx;
				height: 88rpx;
				// background-color: #DCDCDC;
				border-radius: 50%;
			}
			.title{
				margin-top: 9rpx;
				line-height: 32rpx;
				text-align: center;
				font-size: 22rpx;
				color: #666666;
			}
		}
	}
	.product-wrapper{
		padding: 30rpx 28rpx 0;
		.title{
			line-height: 48rpx;
			font-size: 38rpx;
			font-weight: bold;
			color: #333333;
		}
		.product-list{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-top: 26rpx;
		}
	}
</style>
